<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="../static/libs/css/bootstrap.css">
      <style>
            .alert {
                  position: absolute;
                  width: 100%;
                  text-align: center;
                  display: none;
            }

            .container {
                  padding-top: 60px;
            }
      </style>
</head>

<body>

      <div class="alert alert-success" id="login_tip">这是一个提示</div>
      <div class="container">
            <form action="javascript:void(0)" class="form-horizontal col-md-4 col-md-offset-4">
                  <h2 class="form-signin-heading">请登录</h2>

                  <div class="form-group">
                        <label for="username" class="control-label">用户名</label>
                        <input type="text" class="form-control" id="username" autocomplete="off" value="wuyanzu3">
                  </div>

                  <div class="form-group">
                        <label for="password" class="contral-label">密码</label>
                        <input type="text" class="form-control" id="password" autocomplete="off" value="123456">
                  </div>

                  <button id="btn" class="btn btn-primary btn-sm">登录</button>
            </form>
      </div> <!-- /container -->
      <script src="../static/libs/js/jQuery.js"></script>
      <script src="../static/libs/js/cookie.js"></script>
      <script>
            // 业务 : 
            // - 1. 点击按钮发送请求; 
            //    - 发送请求的方式 : 
            //         1. xhr   发送请求; 
            //         2. fetch 发送请求; 

            // - 2. 根据响应数据决定提示内容; 

            // 登录信息之中会存在一个token 这个token是后端经过加密处理之后的登陆凭证; 
            // - 你可以利用这个凭证在后续的操作之中证明你的身份; 

            var btn = document.getElementById("btn");
            var username = document.getElementById("username");
            var password = document.getElementById("password");

            btn.onclick = async function () {
                  var options = {
                        url: "http://127.0.0.1:8888/users/login",
                        type: "POST",
                        data: {
                              username: username.value,
                              password: password.value
                        },
                        dataType: "json"
                  }
                  $.ajax(options)
                        .done(function (data) {
                              // 用switch定义code情况; 
                              switch (data.code) {
                                    case 0:
                                          errorTip(data.message);
                                          break;
                                    case 1:
                                          successTip(data.message);

                                          setTimeout(function () {
                                                if (location.hash === "#goods") {
                                                      history.go(-1)
                                                } else {
                                                      location.href = "./index.html"
                                                } 
                                          }, 2000)
                                          // 登录成功之后获取存储用的id; 
                                          setCookie("userid", data.user.id);
                                          setCookie("token", data.token, {
                                                expires: 1
                                          });

                                          break;
                              }
                        })


            }

            var login_tip = document.getElementById("login_tip");

            function errorTip(msg) {
                  login_tip.style.display = "block";
                  login_tip.classList.remove("alert-success");
                  login_tip.classList.add("alert-danger");

                  login_tip.innerHTML = msg;

                  setTimeout(function () {
                        login_tip.style.display = "none";
                  }, 2000)
            }
            function successTip(msg) {
                  login_tip.classList.remove("alert-danger");
                  login_tip.classList.add("alert-success");
                  login_tip.style.display = "block";
                  login_tip.innerHTML = msg;

                  setTimeout(function () {
                        login_tip.style.display = "none";
                  }, 2000)
            }

      </script>

</body>

</html>